<template>
  <div>
    <div class="wrap">
      <canvas id="canvas" ref="imgCanvas"></canvas>
      <canvas id="drawCanvas" ref="drawCanvas" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp"
        @mouseleave="onMouseLeave"></canvas>
    </div>
    <img :src="curSrc" alt="" style="margin: 10px 10px 0 0" />
    <button @click="confirm()">确认</button>
    <button @click="cancel()">取消</button>
  
    <canvas id="outCanvas"></canvas>
  </div>
</template>

<script>
export default {
  name: 'ImgEdit',
  props: {
    fileEdit: File
  },
  data() {
    return {
      width: 500,
      height: 300,
      curSrc: '',
      ctx: {
        strokeStyle: '',
        lineWidth: 0,
        fillStyle: ''//设置遮罩层颜色
      },
      imgCtx: '',
      downPoint: [],//存储点位置
      down: '',//鼠标状态
    }
  },
  mounted() {
    // 获取到要加载的图片
    let imgCanvas = this.$refs.imgCanvas;//绘制图片的canvas
    let drawCanvas = this.$refs.drawCanvas;//绘制框选款的canvas
    //设置两个canvas的宽高
    imgCanvas.width = this.width;
    imgCanvas.height = this.height;
    drawCanvas.width = this.width;
    drawCanvas.height = this.height;
    //获取两个canvas的上下文并且保存在data中
    this.ctx = drawCanvas.getContext("2d");
    this.imgCtx = imgCanvas.getContext("2d");
    //加载图片
    let src =window.URL.createObjectURL(this.fileEdit)
    let img = new Image();
    img.src = src;
    img.crossOrigin = "anonymous";
    img.onload = () => {
      console.log("加载完成", img);
      console.log("图片的宽高：",img.width,img.height)
      //图片加载完成后开始绘制图片
      this.imgCtx.drawImage(img, 0, 0, this.width, this.height);
    }
  },
  methods: {

    onMouseDown(e) {
      console.log("鼠标按下", e.offsetX, e.offsetY);
      this.downPoint = [e.offsetX, e.offsetY];
      this.down = true;
      this.ctx.strokeStyle = "#fff";
      this.ctx.lineWidth = 2;
    },

    onMouseMove(e) {
      //鼠标未按下不执行操作
      if (!this.down) {
        return;
      }
      console.log("鼠标移动", e.offsetX, e.offsetY);
      //当前鼠标移动的位置
      let movePoint = [e.offsetX, e.offsetY];
      this.ctx.fillStyle = "rgba(0,0,0,.5)";//设置遮罩层填充颜色
      //清空drawCanvas
      this.ctx.clearRect(0, 0, this.width, this.height);
      //使用设置的填充颜色来设置drawCanvas的颜色
      this.ctx.fillRect(0, 0, this.width, this.height);
      //清除指定区域的颜色，因为需要绘制的选框中间是没有颜色的，不然的话选框区域都是遮罩层的颜色。如下图
      this.ctx.clearRect(
        this.downPoint[0],
        this.downPoint[1],
        movePoint[0] - this.downPoint[0],
        movePoint[1] - this.downPoint[1]
      );
      //绘制描边矩形 四个参数是x坐标 ， y坐标 ， 矩形的长，矩形的宽
      this.ctx.strokeRect(
        this.downPoint[0],
        this.downPoint[1],
        movePoint[0] - this.downPoint[0],
        movePoint[1] - this.downPoint[1]
      );
    },


    onMouseUp(e) {
      console.log("鼠标抬起", e.offsetX, e.offsetY);
      //获取坐标
      let upPoint = [e.offsetX, e.offsetY];
      //重置鼠标按下状态
      this.down = false;
      //获取指定区域的图片数据
      let cutImgData = this.imgCtx.getImageData(
        this.downPoint[0],
        this.downPoint[1],
        upPoint[0] - this.downPoint[0],
        upPoint[1] - this.downPoint[1]
      );
      //获取返回的图片数据中的宽高
      let { width, height } = cutImgData;
      console.log(cutImgData);
      //创建一个用于放置图片的canvas用来输出图片
      let outCanvas = document.createElement("canvas");
      let outCtx = outCanvas.getContext("2d");
      outCanvas.height = height;
      outCanvas.width = width;
      //将图片放置到canvas上
      outCtx.putImageData(cutImgData, 0, 0);
      //以blob的形式输出图片
      outCanvas.toBlob((blob) => {
        this.curSrc = URL.createObjectURL(blob);
      })
    },

    onMouseLeave() {
      this.down = false;
      this.ctx.clearRect(0, 0, this.width, this.height);
    },

   
    confirm(){
      this.$emit('resImg',this.curSrc)

    },

    cancel(){

    }




  
  
  }









}



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#drawCanvas {
  position: absolute;
  top: 0;
  left: 0;
}

.wrap {
  position: relative;
}
</style>